<template>
	<skeleton :skeleton="{name:'rankPage'}" :showSkeleton="showSkeleton">
		<block slot="content">
			<noData :showErrorTip="noData">
				<view slot="content" class="container">
					<rank-item :rank="index+1" v-for="(item,index) in rankData" :key="index" :item="item"></rank-item>
					<view v-if="noMore" class="loading">没有更多了</view>
				</view>
			</noData>
		</block>
	</skeleton>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index'
	import RankItem from './fragments/RankItem';
	import ReportService from '@/services/report/index';
	const reportService = new ReportService();
	export default {
		components: {
			RankItem
		},
		data() {
			return {
				showSkeleton: true,
				noData: false,
				noMore: false,
				pageNum: 1,
				type:0,
				pageSize: 20,
				examId: undefined,
				paperId: undefined,
				rankData: []
			}
		},
		onLoad({
			examId,
			paperId,
			type
		}) {
			this.examId = examId;
			this.paperId = paperId;
			this.type = type
			this.loadData(1);
		},
		onPullDownRefresh() {
			this.loadData(1);
		},
		onReachBottom() {
			this.loadData(this.pageNum + 1);
		},
		methods: {
			loadData(pageNum) {
				let param = {
					pageNo: pageNum,
					pageSize: this.pageSize,
					examId: this.examId,
					paperId: this.paperId,
					type: this.type
				};
				reportService.examData_rank(param).then((response) => {
					uni.stopPullDownRefresh();
					if (response.success) {
						if (pageNum == 1) {
							this.noData = isEmpty(response.result.list);
							this.rankData = response.result.list;
							this.noMore = false;
						} else {
							this.noMore = response.result.list.length < this.pageSize
							this.rankData = [...this.rankData, ...response.result.list];
						}
						this.pageNum = pageNum;
					} else {
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000
						})
					}
				}).then(() => {
					this.showSkeleton = false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading{
		text-align: center;
		font-size: 28upx;
		padding: 20upx 0;
		color: #999;
	}
	.container{
		padding-left: 15upx;
		padding-right: 15upx;
	}
</style>
